八云家的记事簿

day01 - 面试题复习

Sue-522022-04-18 18:20:00前端面试题前端面试题

day01 - 面试题复习（HTML+CSS）

1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

  • IE浏览器（Internet Explorer）：trident 内核。
  • FireFox浏览器（火狐）：gecko 内核。
  • Safari浏览器（苹果）：webkit 内核。
  • Chrome浏览器（谷歌）：blink 内核，(基于webkit，Google与Opera Software共同开发)。

2. 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

<!DOCTYOE>
1

该标签声明于 HTML 文档的最前面，位于 <html> 标签之前。

该标签的作用就是告诉浏览器该文档使用那种 HTML 或 XHTML 规范。（告诉浏览器按照那种规范解析页面）

3. Quirks模式是什么？它和Standards模式有什么区别？

Quriks Mode 为浏览器为了兼容过去旧版本浏览器的设计、并未严格遵循 W3C 标准的页面而产生的一种页面渲染。

从 IE6 开始，引入了 Standards 模式，即 W3C 标准模式，浏览器尝试给符合标准的文档在规范上的正确处理到达指定浏览器的程度。

在 IE6 之前 CSS 不成熟，浏览器对CSS的支持很差，所以在 IE6 之后对 CSS 进行了更好的支持。那么因为有很多页面是基于旧的布局方式写的，而如果 IE6 支持 CSS 则将令这些页面显示不正常；所以在 IE6 后将 DTD（文档类型定义）当成了参数，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

image-20220418155606436

  • 盒模型：在 W3C 标准中，如果设置一个元素的宽高，指的是元素内容的宽高，而在 Quriks 模式下，其宽高包含了 padding 和 border。
  • 设置行内元素的宽高：在 Standards 模式下，给等行内元素设置 width 和 height 都不会生效，而在 Quriks 模式下会生效
  • 设置百分比高度：在 Standards 模式下，一个元素的高度是由内容决定，父元素没有高度，子元素设置后一样无效；使用 margin: 0 auto 设置居中，在 Standards 模式下会生效，反之 Quriks 模式下会失效。

4. div+css的布局较table布局有什么优点？

  • 改版便捷，只需修改 样式文件
  • 页面加载速度更快、结构化清晰、页面显示简洁。
  • 表现和结构相分离
  • 易于优化（seo）搜索引擎更友好

5. img的alt与title有何异同？ strong与em的异同？

  • alt：为不能显示图像、窗体或 applets 的用户代理（UA），通过 alt 属性替换成文字。
  • title：该属性为设置该属性的元素提供建议性的信息。
  • strong：粗体强调标签，强调内容的重要性
  • em：斜体强调标签，更强烈强调，表示内容的强调点。

6. 你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强（progressive enhancement）：

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}
1
2
3
4
5
6

优雅降级（graceful degradation）：

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}
1
2
3
4
5
6

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进或追加功能达到更好的用户体验。

从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。

观点： 渐进增强观点认为应该关注内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。

优雅降级（graceful degradation）：一开始就构筑完整的功能，然后在针对版本浏览器进行兼容。

Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

观点： 该观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

7. 为什么利用多个域名来存储网站资源会更有效？

  • CDN 缓存方便，多域名可以快速的给客户端分配最优下载服务器，传输数据快
  • 突破浏览器并发限制，同一域名最大并发请求数量为6，低版本IE6、7为2
  • 节约 cookie 带宽，多域名分流
  • 节约主域名的连接数，优化页面响应速度
  • 防止不必要的安全问题，如：cookie隔离

8. 请谈一下你对网页标准和标准制定机构重要性的理解

网页标准和标准指定机构都是为了 Web 书写的规范和健康，开发者同意遵循的标准，降低开发安度、成本、SEO，不会因为滥用代码导致的 BUG、安全问题。提高网站的易用性。

9. 请描述一下cookies，sessionStorage和localStorage的区别？

共同点：保存在浏览器端

区别：

  1. cookie数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器之间来回传递；sessionStorage 和 localStorage 不会自动把数据发送到服务器，仅保存在本地；并且 cookie 数据还有路径（path）概念，可以限制 cookie直属于某个路径下。
  2. 存储大小不同：cookie 存储大小为 4k，同时因为每次请求都会携带，所以知识和保存很小的数据；sessionStorage 和 localStorage 存储大小为 4~5M；
  3. 有效期不同：sessionStorage：仅在当前浏览器关闭前有效；localStorage：永久有效；cookie：在设置的时间段内一直有效。
  4. 作用域不同：sessionStorage：不再不同的浏览器窗口共享，即使是一个页面；localStorage：所有窗口都共享；cookie：同 localStorage。
  5. Web Storage：支持事件通知机制，可以将数据更新的通知发送给监听者，其API接口使用更方便。

10. 简述一下src与href的区别

src：用于替换当前元素 href：用于在当前文档和引用资源之间确立联系

src 为 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签位置；在请求 src 资源时会将其指向的资源下载并应用到文档中，如：js脚本，img图片，frame。

<script src ='js.js'></script>
1

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源的位置，建立和当前元素（锚点）或者当前文档（链接）之间的链接。

<link href='common.css' rel='stylesheet'/>
1

浏览器将以上链接识别为该文档的 CSS 文件，就会并行下载资源且不会停止当前文档的处理，这也是为什么建议使用 link 方式加载 CSS。

11. 知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg

webp（重点）：谷歌开发的一种只在加快图片加载速度的图片格式。图片会被压缩为 jpeg 的 2/3 ，并节省了服务器带宽资源和数据空间。 Apng（重点）：全称为：Animated Portable Network Graphics，是 PNG 的位图动画扩展，可以实现 png 格式的动态图片效果。

12. 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

13. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns 缓存、cdn 缓存、浏览器缓存、服务器缓存

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

  1. 图片懒加载：当页面未滚动到图片的可视区时，图片不加载，当页面滚动到图片的可视区时，图片加载。
  2. 如果为幻灯片、相册等：可以使用图片预加载技术，将当前图片的前一张和后一张优化下载。
  3. 图片为 CSS 图片：可以使用 CSSsprite、SVGsprite、Iconfont 等技术。
  4. 大型图片：加载时进行图片的压缩成缩略图。
  5. 如果图片展示区域小于图片的真实大小：则因在服务器端根据业务需求进行图片的压缩后在展示。

15. 你如何理解HTML结构的语义化？

语义化，顾名思义，就是在书写 HTML 结构时用相应的有一定语义的英文单词（标签）标识，是页面整体更加容易阅读和理解，结构清晰，从而方便机器更快速的理解网页内容。

  • 正确的标签做正确的事
  • 页面内容结构化
  • 无CSS时也可以进行网页阅读
  • 方便浏览器、搜索引擎解析，利于SEO

通过 HTML5 的新特性中的标签，进行定义不同的标识。

16. 谈谈以前端角度出发做好SEO需要考虑什么？

合理的标签使用，主要的互联网目录，链接交换和链接广泛度。

17. 有哪项方式可以对一个DOM设置它的CSS样式？

  • 外部样式表：引入一个外部 CSS 文件
  • 内部样式表：将 CSS 代码放在 <style> 标签中
  • 内联样式：将 CSS 样式直接定义在 HTML 元素内部

18. CSS都有哪些选择器？

派生选择器（用 HTML 标签申明）、ID选择器（用DOM的ID申明）、类选择器（用一个样式类名申明）、属性选择器（用 DOM 的属性申明）

扩展：

  • 后代选择器（利用空格间隔，比如div .a{ }）
  • 群组选择器（利用逗号间隔，比如p,div,#a{ }）

19. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

  1. display：none
  2. visibility：hidden
  3. 设置宽高为 0
  4. 透明度为 0
  5. 设置 z-index 位置在 1000em

20. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不具备了 hover 和 active，需要改变 CSS 属性排列顺序：L-V-H-A（link，visited，hover，active）

ON THIS PAGE